<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:pe="http://primefaces.org/ui/extensions">

    <body>
        <ui:composition template="./templates/all.xhtml">

            <ui:define name="title">
                ChatSpace
            </ui:define>

            <ui:define name="top">
                top
            </ui:define>

            <ui:define name="left">
                left
            </ui:define>

            <ui:define name="right">
                right
            </ui:define>

            <ui:define name="content" id="con">

                <h:form prependId="true" id="f"> 

                    <p:poll interval="100" update="f" />
                    <p:tabView id="tabView" dynamic="true" style="width:700px; height: 530px;" 
                               value="#{chatMB.users}" effect="fade" cache="false"
                               var="u" orientation="left" >
                        <p:ajax event="tabChange" listener="#{chatMB.change}" />
                        <p:tab>
                            <f:facet name="title">
                                <table>
                                    <tr>
                                        <td><img src="#{u.tof}" width="25" height="25" /></td>
                                        <td title="#{u.mail}">#{u.firstname} #{u.lastname}</td>
                                    </tr>
                                </table>
                            </f:facet>
                            <p:scrollPanel mode="normal" styleClass="scrollDisc" style="width:505px;height:500px; border:0px solid red">
                                <table border="0">
                                    <c:forEach items="#{chatMB.discussions}" var="disc" >
                                        <tr>
                                            <td style="vertical-align: top; width:30px;">
                                                <p:graphicImage  value="#{disc.user.tof}" width="25" height="25" />&nbsp;</td>
                                            <td style="vertical-align: top" title="#{disc.dt}">
                                                <pre> #{disc.message} </pre>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                </table>
                            </p:scrollPanel>
                        </p:tab>
                    </p:tabView>
                    <br/>
                    <br/>
                </h:form>
                <h:form>
                    <p:inputTextarea autoResize="false" style="float:left; width: 500px;" value="#{chatMB.message}" />
                    <p:commandButton style="float:left; margin-left: 10px;  width:190px; height:58px;"  update=":f" value="Send" action="#{chatMB.send}"/>
                    <p:ajaxStatus style="float:left">
                        <f:facet name="start">
                            <h:graphicImage height="25" width="25" value="images/ajax-loader.gif" />  
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value=""/>
                        </f:facet>
                    </p:ajaxStatus>
                    <div style="clear: both" />
                </h:form>
            </ui:define>

            <ui:define name="bottom">
                bottom
            </ui:define>

        </ui:composition>
    </body>
</html>
